<script lang='ts' setup>
import { reactive,onMounted,ref} from 'vue'

const state = reactive({ 
	headquartersPowerList: ['首页','商品管理','库存管理','人事管理','个人中心','系统设置','卡项管理','品牌管理','商品列表','新增商品','商品规格','质保管理'],
	storePowerList: ['首页','支出管理','订单管理','会员管理','退款申请','会员停卡','会员统计','补录管理','库存管理','库存查询','商品进货'],
	sendPeple: '',
	phone: '',
	remark: '',
	methods: 1,
    tableData: [
		{
			id: 1, 
			job: '大螺丝',
			six: '女',
			money: '22',
			
		}
	] as Array<any>,
    rowId: 0
})
const innerVisible = ref(false)

const props = withDefaults(defineProps<{
    id: number,
    modelValue: boolean, 
	type: number
}>(), {
    type: 0,
	id: 0,
	modelValue: false
})

const emit = defineEmits(['update:modelValue'])

const closeDialog = () => {
    emit('update:modelValue', false)
}

const previewInfo = (row: any) => {
    state.rowId = row.id 
	innerVisible.value = true
}


</script>

<template>
    <main>
        <el-dialog v-model="props.modelValue" :title="`${props.type === 1 ? '员工详情' : '关联门店'}`" @close="closeDialog" style="width: 800px;" center>
            	<section>
					<section v-if="props.type === 1">
						<section class="mb10">
							<h3>基本信息</h3> 
						</section> 
						<section class="mb20"> 
							<el-table :data="state.tableData" style="width: 100%" border> 
								<el-table-column label="真实姓名" prop="job" />
								<el-table-column label="性别" prop="money" />
								<el-table-column label="联系方式" prop="orderPrice" />
							</el-table>
							
						</section>
						<section class="mb20">
							<h3 class="mb10">居住信息</h3>
							<el-table :data="state.tableData" style="width: 100%" border class="mt50"> 
								<el-table-column label="户籍地" prop="job" /> 
							</el-table>
							<el-table :data="state.tableData" style="width: 100%" border class="mt10"> 
								<el-table-column label="现居地" prop="job" /> 
							</el-table>
						</section>
						
						<section class="mb10">
							<h3>工作信息</h3> 
						</section> 
						<section class="mb20"> 
							<el-table :data="state.tableData" style="width: 100%" border> 
								<el-table-column label="学历" prop="job" />
								<el-table-column label="专业" prop="money" />
								<el-table-column label="工作时间" prop="orderPrice" />
							</el-table>
						</section>
						<section class="mb10">
							<h3>关联门店信息</h3> 
						</section> 
						<section class="mb20"> 
							<el-table :data="state.tableData" style="width: 100%" border> 
								<el-table-column label="门店类型" prop="job" />
								<el-table-column label="门店名称" prop="money" />
								<el-table-column label="职位" prop="orderPrice" />
							</el-table>
						</section>
						<section class="mb10">
							<h3>紧急联系人信息</h3> 
						</section> 
						<section class="mb20"> 
							<el-table :data="state.tableData" style="width: 100%" border> 
								<el-table-column label="姓名" prop="job" />
								<el-table-column label="关系" prop="money" />
								<el-table-column label="联系方式" prop="orderPrice" />
							</el-table>
						</section>
					</section>
					<section v-if="props.type === 2 || props.type === 3">
						<el-table :data="state.tableData" style="width: 100%" border> 
							<el-table-column label="门店类型" prop="job" />
							<el-table-column label="门店名称" prop="money" />
							<el-table-column label="职位" prop="orderPrice" />
						</el-table>
					</section> 
				</section>
        </el-dialog>
    </main>
</template>

<style lang='scss' scoped>
.power-list{
	border: 1px solid #ededed;
	
	h4{
		background-color: #f5f5f5;
		font-size: 16px;
		padding: 12px 10px;
		color: #999;
	}
	.power-item-list{
		display: flex;
		flex-wrap: wrap;
		padding  : 0 0 12px 12px;
	}
	.power-item{
		padding: 6px;
		border: 1px solid #ededed;
		margin: 12px 12px 0 0 ;
		margin-bottom: 0;
		color: #888;
		border-radius: 4px;
	}
}
</style>